import React, { useEffect } from 'react';
import { Form, Select, Row, Col } from 'antd';

const { Option } = Select;

const PostFormItem = props => {
    const {
        label = '',
        prop: receivedProp = [], // prop可以传一个值也可以是一个数组
        initialFormInfo = {}, // 可以把所有初始值放在initialFormInfo
        required = false,
        disabled = false,
        positionTypeList,
        rules,
        form,
        ...otherProps
    } = props;
    const prop = Array.isArray(receivedProp) ? receivedProp : new Array(receivedProp);
    const { getFieldDecorator } = form;
    const [secondPositionTypeOptions, setSecondPositionTypeOptions] = React.useState([]);
    const currPositionType = code => positionTypeList.find(item => item.positionTypeCode === code);
    useEffect(() => {
        if (initialFormInfo[prop[0]]) {
            setSecondPositionTypeOptions((currPositionType(initialFormInfo[prop[0]]) || {}).children);
        }
    }, [positionTypeList, initialFormInfo[prop[0]]]);
    const onPositionTypeChange = val => {
        form.setFieldsValue({ [prop[1]]: undefined });
        setSecondPositionTypeOptions((currPositionType(val) || {}).children);
    };
    const dictOptions = dict =>
        dict &&
        dict.map(item => (
            <Option value={item.positionTypeCode} key={item.positionTypeCode}>
                {item.positionTypeName}
            </Option>
        ));
    return (
        <Form.Item label={label} {...otherProps} style={{ marginBottom: 0 }} required={required}>
            <Row gutter={15}>
                <Col md={12} xs={24} sm={24}>
                    <Form.Item>
                        {getFieldDecorator(prop[0], {
                            initialValue: initialFormInfo[prop[0]] || undefined,
                            rules: [
                                {
                                    required,
                                    message: '请选择职位类别'
                                }
                            ]
                        })(
                            <Select
                                disabled={disabled}
                                allowClear
                                placeholder="请选择职位类别"
                                onChange={onPositionTypeChange}
                                getPopupContainer={trigger => trigger.parentElement}
                            >
                                {dictOptions(positionTypeList)}
                            </Select>
                        )}
                    </Form.Item>
                </Col>
                <Col md={12} xs={24} sm={24}>
                    <Form.Item>
                        {getFieldDecorator(prop[1], {
                            initialValue: initialFormInfo[prop[1]] || undefined,
                            rules: [
                                {
                                    required,
                                    message: '请选择'
                                }
                            ]
                        })(
                            <Select disabled={disabled} allowClear getPopupContainer={trigger => trigger.parentElement} placeholder="请选择">
                                {dictOptions(secondPositionTypeOptions)}
                            </Select>
                        )}
                    </Form.Item>
                </Col>
            </Row>
        </Form.Item>
    );
};

export default PostFormItem;
